<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>我的收藏</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap/js/bootstrap.min.js"></script>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/reset.css">
    <link rel="stylesheet" href="/css/userProfiles.css">
    <link rel="stylesheet" href="/js/plugins/jquery-confirm/css/jquery-confirm.css">
    <script src="/js/plugins/jquery-confirm/js/jquery-confirm.js"></script>
    <script src="/js/common.js"></script>
    <!--引入dialog2-->
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <!--引入dialog2-->
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <style>
        .text{
            line-height: 50px;
            overflow: hidden;
            text-overflow: ellipsis;
            text-align: center;
            font-size: 16px;
        }
    </style>
    <script>
        $(function () {
            var user = JSON.parse(sessionStorage.getItem('user'));
            var html = '';
            if (user) {
                //回显用户信息
                $('.bg').css('background-image', 'url("' + user.coverImgUrl + '")');
                $('#nickName').html(user.nickName);
                $('#sign').html(user.sign);
                $('#headImg').attr("src", user.headImgUrl);
                //****************************************************************************
                //***************查收藏的游记*************************************
                var id = user.id;
                $.get("/collects/travels", {userId: id}, function (data) {
                    console.log(data);
                    if (data) {
                        $('#traNum').html(data.length)
                        $.each(data, function (index, value) {
                            html += '<div class="row">' +
                                '                <div class="col-xs-7">' +
                                '                      <a href="/travelContent.html?id=' + value.id + '"><img style="width: 150px;height:100px;border-radius:5px;" src="' + value.coverUrl + '"></a>' +
                                '                </div>' +
                                '                <div class="col-xs-5">' +
                                '                      <span class="text">' + value.title + '</span>' +
                                '                </div>' +
                                '            </div>';

                        });
                        $('#travels').append(html);
                    }
                })
                //攻略
                var html1 ='';
                $.get("/collects/strategys", {userId: id}, function (data) {
                    if (data) {
                        $('#commentNum').html(data.length)
                        $.each(data, function (index, value) {
                            html1 += '<div class="row">' +
                                '                <div class="col-xs-7">' +
                                '                      <a href="/strategyCatalogs.html?id=' + value.id + '"><img style="width: 150px;height:100px;border-radius:5px;" src="' + value.coverUrl + '"></a>' +
                                '                </div>' +
                                '                <div class="col-xs-5">' +
                                '                      <div class="text">' + value.title + '</div>' +
                                '                      <div class="text">' + value.subTitle + '</div>' +
                                '                </div>' +
                                '            </div>';

                        });
                        $('#comments').append(html1);
                    }
                })
                //日报
                var html2 ='';
                console.log(id);
                $.get("/collects/dailyCommends",{userId: id}, function (data) {
                    console.log(data+"a");
                    if (data) {
                        $('#dailyNum').html(data.length)
                        $.each(data, function (index, value) {
                            html2 += '<div class="row">' +
                                '                <div class="col-xs-7 img">' +
                                '                      <a href="/newsContent.html?id=' + value.id + '"><img style="width: 150px;height:100px;border-radius:5px;" src="' + value.coverUrl + '"></a>' +
                                '                </div>' +
                                '                <div class="col-xs-5 texts">' +
                                '                      <div class="text">' + value.title + '</div>' +
                                '                      <div class="text">' + value.subTitle + '</div>' +
                                '                </div>' +
                                '            </div>';

                        });
                        $('#dailys').append(html2);
                    }
                })
            }
        })
    </script>
</head>
<body>
<div class="container bg" style="background-image: url(/img/user/bg.jpeg);">
    <a href="javascript:window.history.go(-1)" class="my-arrow">
        <span><i class="fa fa-chevron-left fa-2x"></i></span>
    </a>
    <div class="container">
        <div class="info">
            <img class="rounded-circle" width="25%" id="headImg">
            <h3 id="nickName"></h3>
            <h6 id="sign"></h6>
        </div>
    </div>
</div>

<div class="tabs">
    <ul class="nav nav-pills nav-justified  border border-left-0 border-top-0 border-right-0" id="pills-tab"
        role="tablist">
        <li class="nav-item">
            <a class="nav-link active" id="travels-tab" data-toggle="pill" href="#travels">
                TA收藏的游记[<span id="traNum">0</span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="comments-tab" data-toggle="pill" href="#comments">
                TA收藏的攻略[<span id="commentNum">0</span>]
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link " id="dailys-tab" data-toggle="pill" href="#dailys">
                TA收藏的日报[<span id="dailyNum">0</span>]
            </a>
        </li>
    </ul>
    <div class="container tab-content" id="pills-tabContent">
        <div class="tab-pane fade show active" id="travels">
        </div>
        <div class="comment tab-pane fade " id="comments">
        </div>
        <div class="tab-pane fade" id="dailys"></div>
    </div>
</div>


</body>
</html>